<%@ include file="include/common_jsp_header.jsp"%>
 <c:set var="currentSubSite" value="Alone at Home" />
<html>
<head>
    <%@ include file="include/html_head.jsp" %>

    <script src="${scriptPath}/jqPlot/jquery.jqplot.min.js" type="text/javascript"></script>
    <script src="${scriptPath}/jqPlot/plugins/jqplot.logAxisRenderer.min.js" type="text/javascript"></script>
    <script src="${scriptPath}/jquery.tagcloud-2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${scriptPath}/jqPlot/jquery.jqplot.css" type="text/css" media="screen,projection" />

    <script language="javascript" type="text/javascript">
        var displayHist = function(data) {
            mydata = jQuery.parseJSON(data);
            plot = $.jqplot('chartdiv',  mydata,
            { title:'Tweet distribution',
              axes:{yaxis:{min:0, max:533, label:'count'},
                xaxis:{min:10350, max: 10378, label:'time'}},
              series:[{color:'#5FAB78', label: 'histogram'}],
            });
        }

        var displayTopColloc = function(data) {
          mydata = jQuery.parseJSON(data);
          $("#colloctopdiv").tagCloud(mydata);
        }

        var displayBottomColloc = function(data) {
          mydata = jQuery.parseJSON(data);
          $("#collocbottomdiv").tagCloud(mydata);
        }

        var displayChartColloc = function(data) {
          mydata = jQuery.parseJSON(data);
          plot = $.jqplot('collocchartdiv', mydata,
          { title:'N gram distribution',
            axes:{yaxis:{min:1, label:'log likelihood', renderer:$.jqplot.LogAxisRenderer},
              xaxis:{min:0, max: 50000, label:'id'}},
            series:[{color:'#5FAB78', label: 'histogram'}]
          });
        }

        var selectHist = function(query) {
            jQuery.data('charttitle', 'title', query + " histogram");
            $.get("${dataPath}/hist/" + query +".hist", displayHist);
        }

        $(document).ready(function() {
            $.get("${dataPath}/hist/neofonie.hist", displayHist);
            $.get("${dataPath}/colloc/top.data", displayTopColloc);
            $.get("${dataPath}/colloc/bottom.data", displayBottomColloc);
            $.get("${dataPath}/colloc/chart.data", displayChartColloc);

            $("#selectedQuery").change( function() {
                var query = $("#selectedQuery option:selected").text();
                selectHist(query);
            });
        });


    </script>
</head>
<body>

   <div id="site-wrapper" class="container">
   <%@ include file="include/page_header.jsp" %>

      <h1>
        DICODE dash board - twitter analysis
      </h1><br/><br/>

      <div style="position:relative;left:100px;top:50px"">
        <form:form commandName="homeCommand">
            <div id="availableQueries">
                <h3><fmt:message key="home.allQueries"/></h3>
                <form:select path="selectedQuery" items="${homeCommand.allKnownQueries}" multiple="disabled" size="3" />
            </div>
        </form:form>
      </div>

      <div id="charttitle" style="position:relative;left:170px;top:80px""><h2>Twitter Histogram</h2></div>
      <div id="chartdiv" style="height:300px;width:300px;position:relative;left:100px;top:120px"></div>

      <div id="colloctoptitle" style="position:relative;left:100px;top:250px"><h2>Top Tags All</h2></div>
      <div id="colloctopdiv" style="height:250px;width:500px;position:relative;left:100px;top:290px"></div>

      <div id="collocbottomtitle" style="position:relative;left:100px;top:600px""><h2>Bottom Tags All</h2></div>
      <div id="collocbottomdiv" style="height:250px;width:500px;position:relative;left:100px;top:630px"></div>

      <div id="colloccharttitle" style="position:relative;left:100px;top:1000px""><h2>Tag frequency distribution</h2></div>
      <div id="collocchartdiv" style="position:relative;left:100px;top:1100px""></div>
    </div>
</body>
</html>
